
<template>
  <div class="edu-page-warp">
    <ConditionCard
        shadow="never"
        body-style="padding: 24px 24px 6px 24px;"
        @search="filterTaskSubmit"
        @reset="resetForm('queryForm')"
    >
        <el-form ref="queryForm"
                :model="query"
                label-width="100px">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item :label="$t('minor.major.college') + ':'"
                                prop="departmentId"
                                class="no-bottom">
                    <el-select
                        v-model="query.departmentId"
                        :clearable="canSelectFaculty"
                        :filterable="true"
                        :placeholder="$t('message.plzSelect')"
                        style="width: 100%">
                        <el-option
                        v-for="item in options.faculty"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value" />
                    </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="审批状态:"
                                prop="status"
                                class="no-bottom">
                    <el-select
                        v-model="query.status"
                        :placeholder="$t('message.plzSelect')"
                        clearable
                        style="width: 100%">
                        <el-option
                        v-for="item in options.status"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value" />
                    </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="起始时间:"
                                prop="startTime"
                                class="no-bottom">
                    <el-date-picker
                        v-model="query.startTime"
                        :picker-options="pickerOptions"
                        type="datetime"
                        clearable
                       :placeholder="$t('message.plzSelect')"
                        format="yyyy/MM/dd HH:mm:ss"
                        value-format="timestamp"
                        align="right"
                        style="width: 100%" />
                    </el-form-item>
                </el-col>
                </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="终止时间:"
                                prop="endTime"
                                class="no-bottom">
                    <el-date-picker
                        v-model="query.endTime"
                        :picker-options="pickerOptions"
                        type="datetime"
                        :placeholder="$t('message.plzSelect')"
                        clearable
                        format="yyyy/MM/dd HH:mm:ss"
                        value-format="timestamp"
                        align="right"
                        style="width: 100%" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="申请人:"
                        prop="applicantName">
                        <el-input
                            v-model="query.applicantName"
                            clearable
                                placeholder="请输入申请人工号或者姓名"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </ConditionCard>
    <el-card v-loading="loading"
             shadow="never"
             body-style="padding: 24px;">
        <div class="edu-page-title">审批列表</div>
      <div class="edu-opertion-bar">
        <div class="float-left"></div>
        <div class="float-right"></div>
      </div>
      <EduTable :data="taskList"
                :selection="false"
                @page-change="handleCurrentChange"
                :total="query.total"
                :pageSize="query.pageSize"
                :pageNum="query.pageNum"
                :order="true"
                style="border-top: 1px solid #ebeef5;">
        <!-- <el-table-column prop="applyNo"
                         label="申请编号" /> -->
        <!-- <el-table-column label="流程编号"
                         show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.no }}</template>
        </el-table-column> -->
        <el-table-column label="申请人"
                         show-overflow-tooltip>
            <template slot-scope="scope">
                  {{ scope.row.applicantName }}
            </template>
        </el-table-column>
        <el-table-column label="申请类型"
                         show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.wfTypeName }}</template>
        </el-table-column>
        <el-table-column label="申请时间"
                         show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.time | formatDate }}</template>
        </el-table-column>
        <el-table-column label="审批状态"
                         show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 'Process'"
                    type="info">进行中</el-tag>
            <el-tag v-if="scope.row.status == 'End'"
                    type="success">通过</el-tag>
            <el-tag v-if="scope.row.status == 'Reject'"
                    type="warning">已驳回</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="下一级审批人"
                         show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.approveNameNew }}</template>
        </el-table-column>
        <el-table-column label="操作"
                         width="90">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.status != 'Process'"
              type="text"
              size="mini"
              @click="showRollDetail(scope.row.no)">查看明细</el-button>
            <el-button
              v-if="scope.row.status == 'Process'"
              type="text"
              size="mini"
              @click="showRollDetail(scope.row.no)">审核</el-button>
          </template>
        </el-table-column>
      </EduTable>
      <!-- <div class="edu-pagination">
        <div class="float-right">
          <el-pagination
            :current-page="query.pageNum"
            :page-sizes="[20,50,100,500,1000]"
            :page-size="query.pageSize"
            :total="query.total"
            layout="total, sizes, prev, pager, next, jumper"
            style="float: right;margin:10px 60px 0 0;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>
    </div> -->
    </el-card>
  </div>
</template>
<script>
import UTILS from 'common/src/utils/utils';
import { queryDic } from 'common/src/api/dictionary';
import { getSessionUser } from 'common/src/api/session';
import {givenApprovalTaskList} from "common/src/api/minor/minorCultureScheme";
import filters from 'common/src/filters';
export default {
    name: 'teacher-roll-check',
    filters: {
        formatDate(date) {
            return filters.formatDate(date, 'yyyy/MM/dd hh:mm:ss');
        }
    },
    data() {
        return {
            query: {
                total: 0,
                startTime: '',
                endTime: '',
                departmentId: '',
                major: '',
                status: '',
                studentId: '',
                wfType: '61',
                pageNum: 1,
                pageSize: 20,
                applicantName: ''
            },
            canSelectFaculty: true,
            options: {
                status: [
                    {
                        value: '',
                        label: '全部'
                    },
                    {
                        value: 'Process',
                        label: '进行中'
                    },
                    {
                        value: 'End',
                        label: '已结束'
                    },
                    {
                        value: 'Reject',
                        label: '已驳回'
                    }
                ],
                faculty: [],
                profession: []
            },
            pickerOptions: {
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    },
                    {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }
                ]
            },
            taskList: []
        };
    },
    created() {
        if (!this.$checkMinor()) return;
        this.initOptions();
        // this.initPage();
    },
    methods: {
        // 获取当前登录角色权限信息
        getType() {
            getSessionUser().then(res => {
                if ((res.code = 200)) {
                    if (!res.data.mockUser) {
                        if (res.data.user.type == 2) {
                            this.queryCondition = false;
                        } else if (
                            res.data.user.innerRoles.join(',').indexOf('1') >=
                                0 &&
                            res.data.user.currentRole == '1'
                        ) {
                            // 校管理员登录
                            this.canSelectFaculty = true;
                            this.query.departmentId = '';
                            this.initPage();
                        }
                        if (
                            res.data.user.innerRoles.join(',').indexOf('2') >=
                                0 &&
                            res.data.user.innerRoles.join(',').indexOf('1') ==
                                -1 &&
                            res.data.user.currentRole == '1'
                        ) {
                            // 学院教务登录
                            this.canSelectFaculty = false;
                            this.query.departmentId = this.options.faculty[0].value;
                            this.initPage();
                        }
                    } else {
                        if (
                            !!res.data.mockUser &&
                            res.data.mockUser.type == 2
                        ) {
                            // 学生
                            this.queryCondition = false;
                        } else if (
                            !!res.data.mockUser &&
                            res.data.mockUser.innerRoles
                                .join(',')
                                .indexOf('1') >= 0 &&
                            res.data.mockUser.currentRole == '1'
                        ) {
                            // 校管理员登录
                            this.canSelectFaculty = true;
                            this.query.departmentId = '';
                            this.initPage();
                        }
                        if (
                            !!res.data.mockUser &&
                            res.data.mockUser.innerRoles
                                .join(',')
                                .indexOf('2') >= 0 &&
                            res.data.mockUser.innerRoles
                                .join(',')
                                .indexOf('1') == -1 &&
                            res.data.mockUser.currentRole == '1'
                        ) {
                            // 学院教务登录
                            this.canSelectFaculty = false;
                            this.query.departmentId = this.options.faculty[0].value;
                            this.initPage();
                        }
                    }
                }
            });
        },
        async initPage() {
            if (!this.$checkMinor()) return;
            let tasks = '';
            try {
                tasks = await givenApprovalTaskList(this.query);
                this.loading = false;
                if (tasks.code === 200) {
                    this.query.total = tasks.data.total_;
                    (tasks.data.list || []).forEach(item => {
                        item.approveNameNew = item.approvorName;
                        if (item.approveType != 1) {
                            if (item.approvorName && item.approvorId) {
                                item.approveNameNew = `${item.approvorName}(${item.approvorId})`;
                            }else {
                                item.approveNameNew = '';
                            }
                        }
                    })
                    this.taskList = tasks.data.list;
                }
            } catch (err) {
                this.loading = false;
            }
        },
        initOptions() {
            let data = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: ['X_YX']
            };
            queryDic(data).then(res => {
                this.options.faculty = [];
                UTILS.fillSelect(
                    {
                        faculty: 'X_YX'
                    },
                    res.data,
                    this.options
                );
                this.getType();
            });
        },
        _fill(type, data) {
            for (const key in data) {
                this.options[type].push({
                    value: key,
                    label: data[key]
                });
            }
        },
        async handSearchChang() {},
        handleSizeChange(pageSize) {
            // this.query.pageSize = pageSize;
            // this.query.pageNum = 1;
            // this.initPage(this.queryItem);
        },
        handleCurrentChange(val) {
            this.query.pageNum = val.pageNum;
            this.query.pageSize = val.pageSize;
            this.initPage();
        },
        showRollDetail(id) {
            this.$router.push('/cultureSchemeRollDetail?id=' + id);
        },
        resetForm(formName) {
            // this.$refs[formName].resetFields();
            this.query.status = '';
            this.query.startTime = '';
            this.query.endTime = '';
            this.$refs[formName].resetFields();
            if (this.canSelectFaculty) {
                this.query.departmentId = '';
            }
            else {
                this.query.departmentId = this.options.faculty[0] && this.options.faculty[0].value || '';
            }
            this.filterTaskSubmit();
        },
        filterTaskSubmit() {
            this.query.pageNum = 1;
            this.initPage();
        }
    }
};
</script>
<style scoped>
</style>
